<template>
    <div class="content">
        <el-dialog :title="this.isAdd? '新增命名空间' : '编辑命名空间'" :close-on-click-modal="false" :visible.sync="visible" width="30%">
            <el-form ref="dataForm" :model="form" label-width="100px">
                <el-form-item label="命名空间">
                    <el-input v-model.trim="form.ns"></el-input>
                </el-form-item>
                <el-form-item label="空间名称">
                    <el-input v-model.trim="form.name"></el-input>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model.trim="form.description"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-button icon="el-icon-circle-plus" @click="handleSumbit">提交</el-button>
                    <el-button icon="el-icon-error" @click="visible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
    import { nsAdd, nsUpdate, nsInfo } from '../../api/ns'
    export default {
        data() {
            return {
                isAdd: false,
                visible: false,
                form: {
                    title: '',
                    ns: '',
                    name: '',
                    description: ''
                }
            }
        },
        methods: {
            handleSumbit() {
                if (this.isAdd) {
                    nsAdd(this.form.ns, this.form.name, this.form.description).then((res) => {
                        this.$message({
                            message: '新增成功！', type: 'success', duration: 800, onClose: () => {
                                this.visible = false
                                this.$emit('refreshDataList')
                            }
                        })
                    })
                } else {
                    nsUpdate(this.form.ns, this.form.name, this.form.description).then((res) => {
                        this.$message({
                            message: '更新成功！', type: 'success', duration: 800, onClose: () => {
                                this.visible = false
                                this.$emit('refreshDataList')
                            }
                        })
                    })
                }
            },
            init(isAdd, ns) {
                this.form = {
                    title: '',
                    ns: '',
                    name: '',
                    description: ''
                }
                this.form.ns = ns || ''
                this.isAdd = isAdd
                this.visible = true
                this.$nextTick(() => {
                    this.$refs.dataForm.resetFields()
                    if (!this.isAdd) {
                        nsInfo(this.form.ns).then((res) => {
                            let data = res.data
                            this.form.ns = data.ns
                            this.form.name = data.name
                            this.form.description = data.description
                        })
                    }
                })
            }

        }
    }
</script>
<style scoped>
.content {
    margin: 20px 0px;
}
.el-form-item {
    margin: 20px 0px;
    font-weight: bold;
    text-align: left;
}
</style>
